<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="main-wrapper account-wrapper" id="login">
    <div class="account-page">
        <div class="account-center">
            <div class="account-box">
                <form id="form" action="index.html" class="form-signin">
                    <div class="account-logo">
                        <a href="javascript:login();"><img src="assets/img/logo-dark.png" alt=""></a>
                    </div>
                    <div class="form-group">
                        <label>手机号码</label>
                        <input id="mobile" name="mobile" type="text" autofocus="" class="form-control" v-model="mobile">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input id="password" name="password" type="password" class="form-control" v-model="password">
                    </div>
                    <div class="form-group text-right">
                        <a href="forgot-password.html">忘记密码</a>
                    </div>
                    <div class="form-group text-center">
                        <button type="button" @click="login" class="btn btn-primary account-btn">登录</button>
                    </div>
                    <div class="text-center register-link">
                        还没有账户？ <a href="register.html">现在注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/vue.global.js"></script>
<!--json data-->
<script type="text/javascript" src="json/users.json"></script>
<script src="assets/js/jquerysession.js"></script>
<script type="text/javascript">
    const LoginVueApp = {
		  data() {
		    return {
                mobile: "",
                password: ""
		  	}
		  },
		  methods: {
			login(){
			    this.mobile = this.mobile.trim();
                if(this.mobile == ''){
                    alert("请输入手机号码");
                    $("#mobile").focus();
                    return;
                }
                this.password = this.password.trim();
                if(this.password == ''){
                    alert("请输入密码");
                    $("#password").focus();
                    return;
                }
                let user = users.filter((u)=>{
                    return u.mobile == this.mobile && u.password == this.password
                });
                if(user.length == 1){
                    $.session.set('name', user[0].name);
                    $.session.set('img', user[0].img);
                    $.session.set('mobile', user[0].mobile);
                    $.session.set('role', user[0].role);
                    $.session.set('age', user[0].age);
                }else if(user.length == 0){
                    alert('查无此人');
                    return;
                }else {
                    alert('多用户错误');
                    return;
                }
                window.location.href="index.html";
			}
		  }
	}
	Vue.createApp(LoginVueApp).mount('#login');
</script>
</body>

</html>